<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <el-button class="selectAlls" type="text" @click="selectAll">
        全选
      </el-button>
      <el-button class="cancelSelectAlls" type="text" @click="cancelSelectAlls">
        取消全选
      </el-button>
      <ActionBar
        :has-add="false"
        :has-del="false"
        :has-edit="false"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:content>

      <!-- <div class="tree"> -->
      <el-tree
        ref="tree"
        :props="treerule"
        :data="treeData"
        show-checkbox
        node-key="routeId"
        accordion
        :check-strictly="true"
        :default-checked-keys="defaultchecklist"
        @node-click="handleEdit"
        @check="handleSionChange"
        @check-change="handleSelectionChange"
      />
      <!-- <el-cascader-panel :options="options"></el-cascader-panel> -->
      <!-- </div> -->
    </template>
  </BaseMainSlot>
</template>
<script>
import userManage from "@/api/system-settings/user-manage";
import ActionBar from "@/components/ActionBar/index.vue";
import BaseMainSlot from "@/components/BaseMainSlot/kong.vue"
import { mymixin } from "@/utils/mixins"
import zhrequest from "@/api/axios";
import { getToken } from "@/utils/auth";
import { webServiceUrl } from "@/api/baseURL"
export default {
  components: { BaseMainSlot, ActionBar },
  mixins: [mymixin],
  props: {
    userid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      treerule: {
        children: "children",
        label: "metaName"
      },
      treeData: [],
      defaultchecklist: [],
      permisslist: [],
      userRouteMapperId: null,
      saveActive: false,
      cancelActive: false
    }
  },
  watch: {
    id() {
      this.getfuncauth()
    }
  },
  mounted() {
    this.getdatamet()
  },
  // created() {
  //   this.getdatamet()
  // },
  methods: {
    getdatamet() {
      let menuurlone
      let params = {}
      // let routerpid = parseFloat(sessionStorage.routerpid)
      // let orgid = parseFloat(sessionStorage.organizationId)

      let routerpid = JSON.parse(getToken("routerpid"));
      let orgid = JSON.parse(getToken("organizationId"));
      if (routerpid === 0) {
        menuurlone = "powerManage/route/queryAllRouteTreeList"
        // orgid = routerpid
      } else if (routerpid === orgid) {
        menuurlone = "powerManage/route/queryRouteTreeList"
      } else {
        menuurlone = "powerManage/route/queryRouteTreeListByUser"
        params.parentId = orgid
      }
      // let menuurl = webServiceUrl + "powerManage/route/queryRouteTreeList"
      let menuurl = webServiceUrl + menuurlone
      params.organizationId = routerpid
      // let menuurl = webServiceUrl + "powerManage/route/queryAllRouteTreeList"
      // let params = {
      //   organizationId: 0
      // }
      // let accessedRoutes;
      zhrequest.post(menuurl, params).then(
        res => {
          this.treeData = res.data || []
          // console.log(res)
          this.treeData.forEach(item => {
            item.metaName = item.meta.name
            this.$set(item, "metaName", item['meta']['title'])
            if (item.children) {
              item.children.forEach(itemTwo => {
              // itemTwo.metaName = itemTwo.meta.name
                this.$set(itemTwo, "metaName", itemTwo['meta']['title'])
              })
            }
          })
          // console.log(this.treeData)
          this.getfuncauth()
        })
      // userManage.gettreedata().then(res => {
      //   this.treeData = res.data
      //   // console.log(res)
      //   this.treeData.forEach(item => {
      //     item.metaName = item.meta.name
      //     this.$set(item, "metaName", item['meta']['title'])
      //     if (item.children) {
      //       item.children.forEach(itemTwo => {
      //         // itemTwo.metaName = itemTwo.meta.name
      //         this.$set(itemTwo, "metaName", itemTwo['meta']['title'])
      //       })
      //     }
      //   })
      //   // console.log(this.treeData)
      //   this.getfuncauth()
      // })
      // console.log("获取数据")
    },
    // 获取所拥有的权限
    getfuncauth() {
      this.defaultchecklist = []
      // console.log(this.userid)
      userManage.getfuncauth({ id: this.userid }).then(res => {
        let PermissionList = res.data
        // console.log(PermissionList)
        let that = this
        that.$nextTick(
          () => {
            that.$refs.tree.setCheckedNodes([])
          }
        )
        PermissionList.forEach(item => {
          // nowcheck.push(item.functionPermissionId)
          that.$nextTick(
            () => {
            // console.log(item.functionPermissionId)
            // 设置目前所有节点
              // that.$refs.tree.setCheckedKeys([item.routeId], true)
            // 设置某个节点
              that.$refs.tree.setChecked(item.routeId, true)
            }
          )
        });
        // this.checklist = nowcheck
        if (res.data) {
          this.userRouteMapperId = '007'
        }
      })
    },
    setpermission() {
      let par = {
        id: this.userid,
        permisslist: this.permisslist
      }
      userManage.addfuncauth(par).then(res => {
        this.getfuncauth()
      })
      // console.log("设置权限")
    },
    selectAll() {
      // this.flag = true;
      let that = this
      that.$nextTick(
        () => {
          this.$refs.tree.setCheckedNodes(this.treeData);
        })
      this.handleSionChange()
    },
    cancelSelectAlls() {
      let that = this
      that.$nextTick(
        () => {
          that.$refs.tree.setCheckedNodes([])
        }
      )
    },
    handleEdit(row) {
      // console.log(row)
    },
    handleSionChange() {
      this.saveActive = true
      this.cancelActive = true
    },
    handleSelectionChange() {
      let list = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      // console.log(list)
      this.permisslist = list
      // console.log(list)
      // if (this.handleSelectionChange) {
      // }
    },
    // 取消
    cancel() {
      this.canInput = false;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = false;
      this.cancelActive = false;
      this.editActive = false;
      // let that = this
      this.getfuncauth()
      // that.$nextTick(
      //   () => {
      //     that.$refs.tree.setCheckedNodes([])
      //   }
      // )
    },
    save() {
      let par = {
        id: this.userid,
        permisslist: this.permisslist,
        userRouteMapperId: this.userRouteMapperId
      }
      userManage.addfuncauth(par).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg || "修改成功！");
          this.getfuncauth()
          this.cancel()
        } else {
          this.$message.error(res.msg || "修改失败！");
        }
      })
      // console.log("设置权限")
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.tree{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    padding-right: 30px;
}
::v-deep .el-tree {
  height: 100%;
  width: 100%;
  .el-tree-node {
    margin: 0;
    // margin-bottom: 10px;
  }
}
::v-deep .common-layout {
  padding: 0 !important;
  // height: calc(100% - 5px) !important;
  .zhcontent {
    height: 100% !important;
    margin: 0 !important;
  }
}
.selectAlls {
  position: absolute;
    height: 54px;
    width: 100px;
}
.cancelSelectAlls {
  position: absolute;
  height: 54px;
  width: 100px;
  margin-left: 100px;
}
</style>
